<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <title>楼栋新增</title>

    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/css/select2.min.css"
          rel="stylesheet">
    <!-- jqgrid-->
    <link href="${pageContext.request.contextPath}/static/plugins/jqGrid/css/custom.ui.jqgrid.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/layer/skin/layer.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/jqGrid/css/style.css" rel="stylesheet">

    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.form.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/common.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/jqGrid/js/i18n/grid.locale-cn.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/jqGrid/js/minified/jquery.jqGrid.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/js/global.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/js/select2.min.js"></script>
	<script type="text/javascript"
            src="${pageContext.request.contextPath}/static/plugins/My97DatePicker/WdatePicker.js"></script>
    <style type="text/css">
    .table-c table{border-right:1px solid ;border-bottom:1px solid }
	.table-c table td{border-left:1px solid ;border-top:1px solid;}
	#previewTable{border-right:1px solid #DDDDDD;border-bottom:1px solid #DDDDDD;}
	#previewTable td{border-left:1px solid #DDDDDD;border-top:1px solid #DDDDDD;}
	.btn-orange{
   		background-color: #ff795f;
   	}
   	 .left ul li{
			
			*line-height:40px;
			
			*padding-left:20px;
		}
		
		.left ul li a, .left ul li a:hover{
			*color:#fff;
		}
		.wrapper{
			*+margin-left:270px;
		}
		.form-control{
		*+padding:0;
		}
		.table-c table td,table{
		*+border-color:#ccc;
		}
 	</style>
</head>
<body view="menu-item-4142">
<jsp:include page="../../top.jsp"></jsp:include>
<div class="right">
 	<div class="wrapper">
        <div class="panel panel-default">
            <div class="table-c">
                <table >
			    <tr style="height: 120px;">
			        <td style="text-align: center;">楼栋</td>
			        <td >
			       		<div class="col-sm-8" >
							<input class="form-control" id="building1"  name="building1" size="30" style="width: 120px;float:left"/>
							<a  style="float:left">~</a>
							<input class="form-control" id="building2"  name="building2" size="30" style="width: 120px;"/>
							<a >*输入本次添加的楼栋号区间</a>
						</div>
			        </td>
			        <td >
				       	<div class="col-sm-8" >
							<input class="form-control" id="preBuilding"  name="preBuilding" size="30" style="width: 200px;"/>
							<a>*输入楼栋名称前缀（选填）</a>
						</div>
			        </td>
			    </tr>
			    <tr style="height: 120px;">
			        <td style="text-align: center;">单元</td>
			        <td>
			       		<div class="col-sm-8" >
							<input class="form-control" id="unit"  name="unit" size="30" style="width: 200px;"/>
							<a>*输入楼栋下辖单元数量</a>
						</div>
			        </td>
			        <td>
				       	<div class="col-sm-8" >
							<input class="form-control" id="preUnit"  name="preUnit" size="30" style="width: 200px;"/>
							<a>*输入单元名称前缀（选填）</a>
						</div>
			        </td>
			    </tr>
			    <tr style="height: 120px;">
			        <td style="text-align: center;">楼层</td>
			        <td>
			       		<div class="col-sm-8" >
							<input class="form-control" id="floor"  name="floor" size="30" style="width: 200px;"/>
							<a>*输入单元下辖楼层数量</a>
						</div>
			        </td>
			        <td>
<!-- 				       	<div class="col-sm-8" > -->
<!-- 							<input class="form-control" id="preFloor"  name="preFloor" size="30" style="width: 200px;"/> -->
<!-- 							<a>*输入楼层名称前缀（选填）</a> -->
<!-- 						</div> -->
			        </td>
			    </tr>
			    <tr style="height: 120px;">
			        <td style="text-align: center;">房间数量</td>
			        <td>
			       		<div class="col-sm-8" >
							<input class="form-control" id="room"  name="room" size="30" style="width: 200px;"/>
							<a>*输入楼层下辖房间数量</a>
						</div>
			        </td>
			        <td>
<!-- 				       	<div class="col-sm-8" > -->
<!-- 							<input class="form-control" id="preRoom"  name="preRoom" size="30" style="width: 200px;"/> -->
<!-- 							<a>*输入房间名称前缀（选填）</a> -->
<!-- 						</div> -->
			        </td>
			    </tr>
			</table>
            </div>
        </div>
		<div style="margin-bottom: 20px" class="table_line1">
				<div style="text-align: center;">
				<button class="btn btn-orange" style="width: 150px;font-size: 15px !important;" onclick="sure()">确定</button>
				<button class="btn btn-orange" style="width: 150px;font-size: 15px !important;margin-left: 30px;" onclick="preview()">生成预览</button>
				</div>
		</div>
	    <div class="jqGrid_wrapper">
	        <div id="jqGrid_operation" class="jg-grid">
	            <h1>预览</h1>
	            <div class="jqGrid_operation" id="action"></div>
	        </div>
	        <div style="height: 280px;overflow-y:scroll;">
	        	<table id="previewTable" style="margin-top: 20px;text-align: center;"></table>
	        </div>
	        <a style="border-bottom:1px solid #337ab7;margin-left: 14px;font-size: 16px;" href="javascript:;" id="cinstallunitList" onclick="javascript:post('${pageContext.request.contextPath}/admin/cinstallunit_listViewV2.action',{communityId:'${communityId}'})"></a>
	    </div>
    </div>
</div>
<script type="text/javascript">
	function check(){
		 var building1 = $("#building1").val();
		 var building2 = $("#building2").val();
		 var preBuilding = $("#preBuilding").val();
		 var unit = $("#unit").val();
		 var preUnit = $("#preUnit").val();
		 var floor = $("#floor").val();
		 var room = $("#room").val();
    	 var reg = new RegExp("^[1-9]*[1-9][0-9]*$");
//     	 var reg2 = new RegExp("^[A-Za-z]+$");
		 if (!building1) {
			 layer.alert("楼栋初始值必填");
	         return false;
		}else{
	         if ( !reg.test(building1)) {
	        	 layer.alert("楼栋初始值不合法，请输入数字");
	        	 return false;
	         }
	     }
		 
		 if (!building2) {
			 layer.alert("楼栋结束值必填");
			 return false;
		}else{
			
	         if (!reg.test(building2)) {
	        	 layer.alert("楼栋结束值不合法，请输入数字");
	        	 return false;
	         }
	         if (parseInt(building2)<parseInt(building1)) {
	        	 layer.alert("楼栋结束值不能比初始值小");
	        	 return false;
			}
	     }
		 if (!unit) {
			 layer.alert("单元数量必填");
			 return false;
		}else{
	         if (!reg.test(unit)) {
	             layer.alert("单元数量不合法，请输入数字");
	             return false;
	         }
	     }
		 if (!floor) {
			 layer.alert("楼层数量必填");
			 return false;
		}else{
	         if (!reg.test(unit)) {
	             layer.alert("楼层数量不合法，请输入数字");
	             return false;
	         }
	     }
		 if (!room) {
			 layer.alert("房间数量必填");
			 return false;
		}else{
	         if (!reg.test(unit)) {
	             layer.alert("房间数量不合法，请输入数字");
	             return false;
	         }
	     }
		 return true;
	}
	
	function preview() {
		 var table=$("#previewTable");
		 table.empty();
		 if(!check()){
			 return;
		 }
		 var building1 = $("#building1").val();
		 var building2 = $("#building2").val();
		 var preBuilding = $("#preBuilding").val();
		 var unit = $("#unit").val();
		 var preUnit = $("#preUnit").val();
		 var floor = $("#floor").val();
// 		 var preFloor = $("#preFloor").val();
		 var room = $("#room").val();
// 		 var preRoom = $("#preRoom").val();
    	 
		 var num = 0;
		 building1 = parseInt(building1);
		 building2 = parseInt(building2);
		 for(;building1<=building2;building1++){
			for(var unitNum=1;unitNum<=unit;unitNum++){
				for(var floorNum=1;floorNum<=floor;floorNum++){
					for(var roomNum=1;roomNum<=room;roomNum++){
						num++;
				        var tr=$("<tr></tr>");
				        tr.appendTo(table);
				        var td;
				        for(var j=0;j<4;j++){
				        	switch(j){
				        		case 0:
				        			td=$("<td>"+num+"</td>");
				        	  		break;
					        	case 1:
					        		td=$("<td>"+preBuilding+building1+"栋</td>");
					        		break;
					        	case 2:
					        		td=$("<td>"+preUnit+unitNum+"单元</td>");
					        		break;
					        	case 3:
					        		td=$("<td>"+floorNum+zfill(roomNum,2)+"</td>");
				        	 		break;
				        	}
				           td.appendTo(tr);
				        }
					}
				}
				
			}
	     }
	}
	function zfill(num, size) {
	    var s = "00" + num;
	    return s.substr(s.length-size);
	}
	function sure() {
		if(!check()){
			 return;
		 }
		 var building1 = $("#building1").val();
		 var building2 = $("#building2").val();
		 var preBuilding = $("#preBuilding").val();
		 var unit = $("#unit").val();
		 var preUnit = $("#preUnit").val();
		 var floor = $("#floor").val();
		 var room = $("#room").val();
		 $.post("${pageContext.request.contextPath}/admin/cbuilding_add.action", {
			 	'communityId':'${communityId}',
		    	'building1':building1,
		    	'building2':building2,
		    	'preBuilding': preBuilding,
			    'unit': unit,
			    'preUnit': preUnit,
			    'floor':floor,
			    'room':room
	         }, function (result) {
	             result = JSON.parse(result)
	             if (result.code == 1) {
	            	 $("#cinstallunitList").click();
	             }else{
	            	 $("#sub").removeAttr("disabled");
	             	layer.alert(result.msg);
	             }
	         });
	}
	
</script>
</body>
</html>
